<!doctype html>
<html>
<head>
	<meta charset="utf-8">
    <title>image dashboard</title>
    <link href="nprogress.css" rel="stylesheet" />
    <style>
        *{margin:0;padding:0;}
        /*top menu class*/
        .menu{
            width:100%;
            line-height:90px;
            -webkit-box-shadow:0 0 15px #bbb!important;
            -moz-box-shadow:0 0 15px #bbb!important;
            box-shadow:0 0 15px #bbb!important;
            margin-bottom: 15px;
            text-align: center;
        }
        input[type=text], input[type=password] {
            font-size: 13px;
            min-height: 32px;
            margin: 0;
            padding: 7px 8px;
            outline: none;
            color: #333;
            background-color: #fff;
            background-repeat: no-repeat;
            background-position: right center;
            border: 1px solid #d2d2d2;
            border-radius: 3px;
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            transition: all 0.15s ease-in;
            -webkit-transition: all 0.15s ease-in 0;
            vertical-align: middle;
        }
        #search input[type=text] {
            font-size: 18px;
            width: 500px;
        }
        .button {
            position: relative;
            display: inline-block;
            margin: 0;
            padding: 8px 15px;
            font-size: 13px;
            color: #555;
            font-weight: bold;
            white-space: nowrap;
            background-color: #eaeaea;
            background-image: -moz-linear-gradient(#fafafa, #eaeaea);
            background-image: -webkit-linear-gradient(#fafafa, #eaeaea);
            background-image: linear-gradient(#fafafa, #eaeaea);
            background-repeat: repeat-x;
            border-radius: 3px;
            border: 1px solid #ddd;
            border-bottom-color: #c5c5c5;
            box-shadow: 0 1px 3px rgba(0,0,0,.05);
            vertical-align: middle;
            cursor: pointer;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-appearance: none;
        }
        #search .button {
            padding: 10px;
            width: 90px;
        }
        .del-btn{
            background-image: -moz-linear-gradient(#d9534f, #d43f3a);
            background-image: -webkit-linear-gradient(#d9534f, #d43f3a);
            background-image: linear-gradient(#d9534f, #d43f3a);
            color:#fff;
            border-bottom-color:#ccc;
        }
        .pass-btn{
            background-image: -moz-linear-gradient(#5cb85c, #4cae4c);
            background-image: -webkit-linear-gradient(#5cb85c, #4cae4c);
            background-image: linear-gradient(#5cb85c, #4cae4c);
            color:#fff;
            border-bottom-color:#ccc;
        }
        /*img container class*/
        .row{
            width:198%;
            margin: 0 auto;
        }
        .row > .img-block{
            float:left;
            width:10%;
            margin: 0 auto 15px auto;
        }
        .row > .img-block > .thumbnail{
            padding:10px 0;
            width:92%;
            height:430px;
            -webkit-box-shadow:0 0 10px #ddd;
            -moz-box-shadow:0 0 10px #ddd;
            box-shadow:0 0 10px #ddd;
            border:1px solid #fff;
            border-top-width: 2px;
            border-bottom-width: 2px;

            line-height:350px;
            overflow:hidden;
            position:relative;
            text-align: center;
        }
        .row > .img-block > .thumbnail > img{
            /*max-width:100%;*/
            max-height:350px;
            margin:0 auto;
            border-radius: 8px;

            position:relative;
            vertical-align: middle;
            text-align: center;

        }
        .row > .img-block > .thumbnail > p {
            position: absolute;
            bottom: 10px;
            text-align: center;
            line-height: 1;
            width: 100%;
        }
        .img-hover > .thumbnail{
            -webkit-box-shadow:0 0 10px #7a0!important;
            -moz-box-shadow:0 0 10px #7a0!important;
            box-shadow:0 0 10px #7a0!important;
        }
        .img-checked{
            border-color:mediumvioletred!important;
        }
        .ml100{margin-left:100px;}
    </style>
</head>
<body>

    <div id="load_file" hidden >
        <form id="file_upload_form" action="" method="post"  enctype="multipart/form-data">
            <input id="file_pic" multiple="multiple" type="file" name="image" onchange="open_img(this)">
            <input id="image_id" type="number" name="image_id" value="2">
            <input type="submit" id="safety_submiit">
        </form>
    </div>

    <div class="menu">
        <div id="search">
            <!--style="display:none;"-->
        <input type="text" id="key" placeholder="输入网址"  value="">
        <input class="button" type="button" id="btn-load" value="本地上传" onclick="javascript:document.getElementById('file_pic').click();">
        <input class="button ml100 pass-btn" type="button" id="btn-pass" value="检测">
        </div>
        <div id="models">
            <label><input type="checkbox" id="object-det" name="models" value="object-det"  style="margin-left: 5em"> 物品检测</label>
            <label><input type="checkbox" id="animal-recognition"  name="models"  value="animal-recognition" style="margin-left: 5em"> 目标识别</label>
            <label><input type="checkbox" id="image-classification"  name="models"  value="image-classification" style="margin-left: 5em"> 图像分类</label>
            <label><input type="checkbox" id="image-seg"  name="models"  value="image-seg" style="margin-left: 5em"> 图像分割</label>
            <label><input type="checkbox" id="feast-extract"  name="models"  value="feast-extract" style="margin-left: 5em"> 特征提取</label>
            <label><input type="checkbox" id="video-tracking"  name="models"  value="image-tracking" style="margin-left: 5em"> 视频跟踪</label>
        </div>

    </div>

    <div class="row" id="container"></div>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="nprogress.js"></script>
<script>

    var host = location.host;
    console.log(host);
    backend_server = "http://"+host+'/api/v1.0/model';

    var cn = 'img-block';
    var ic = 'img-checked';  //图片被选中时的样式
    var imgManger = {
        //data为图片列表。本地图片列表
        render: function(data){
            var html = '';
            //每张图片显示类型为thumbnail。显示内容为图片，名称和id
            for (var i=0; i<data.length; i++){
                html += '<div class="img-block">'+
                        '    <div class="thumbnail" dataid="'+data[i].id+'">'+
                        '        <img src="'+data[i].img+'" alt="...">'+
                        '        <p font-size="9">检测结果: ***</p>'+
                        '    </div>'+
                        '</div>';
            };
            document.getElementById("container").innerHTML = html;
        },

        getImgs: function(){
            var ids = [];
            var ckd = document.getElementsByClassName(ic);
            for (var i=0; i<ckd.length; i++){
                ids.push(ckd[i].attributes.dataid.value);  //将选中的图片的id记录到列表
            };
            return ids;
        },
        //初始化就是为显示的图片添加鼠标事件
        init: function(){
            var self = this;
            var imgObjs = document.getElementsByClassName(cn);
            for (var i = 0; i < imgObjs.length; i++) {
                imgObjs[i].onclick = self.imgClick;
                imgObjs[i].onmouseenter = self.imgHover;
                imgObjs[i].onmouseleave = self.imgOut;
            };
        },
        //图片点击事件
        imgClick: function(){
            var tb = this.getElementsByClassName('thumbnail')[0];

            if (tb.className.indexOf(ic) == -1){
                tb.className += ' '+ic;
            }else{
                var classes = tb.className.split(' ');
                for (var i=0; i<classes.length; i++){
                    if (classes[i]==ic){
                        delete classes[i];
                    };
                };
                tb.className = classes.join(' ');
            };
        },
        //鼠标经过事件
        imgHover: function(){
            var ih = 'img-hover';
            if (this.className.indexOf(ih) == -1){
                this.className += ' '+ih;
            };
        },
        //鼠标移出事件
        imgOut: function(){
            var ih = 'img-hover';
            if (this.className.indexOf(ih) > -1){
                this.className = cn;
            };
        }
    };


    // 在线图片
    allimages = [
        // {
        //     'img':'images/001.jpg',
        //     'id':1
        // }
    ];
    //本地图片
    alllocalimg=[
        //  {
        //     'image_id':'3',
        //     'image':file
        // }
    ];

    function open_img(dom){
        local_path= $(dom).val();
        console.log(local_path)
    }

    image_load_type=0;     //默认爬虫获取图片

    //选择图片，马上预览
    function open_img(obj) {
        alllocalimg=[];    //清空之前的数据
        image_load_type=1;
        document.getElementById("container").innerHTML="";
        var fl=obj.files.length;
        for(let i=0;i<fl;i++){
            let file=obj.files[i];

            var reader = new FileReader();

            //读取文件过程方法

            reader.onloadstart = function (e) {
                console.log("开始读取....");
            }
            reader.onprogress = function (e) {
                console.log("正在读取中....");
            }
            reader.onabort = function (e) {
                console.log("中断读取....");
            }
            reader.onerror = function (e) {
                console.log("读取异常....");
            }
            reader.onload = function (e) {
                console.log("成功读取....");

                html = '<div class="img-block">'+
                        '    <div class="thumbnail" dataid="'+i+'">'+
                        '        <img src="'+e.target.result+'" alt="...">'+
                        '        <p font-size="9" style="height: 50px">检测结果:**</p>'+
                        '    </div>'+
                        '</div>';
                base64_str=String(e.target.result).replace(/data:.*;base64,/,'') //replace('data:image/jpeg;base64,','').replace('data:image/png;base64,','').replace('data:;base64,','');
                // console.log(base64_str)
                alllocalimg.push({'image_id':i,'image':file,'image_data':base64_str});
                document.getElementById("container").innerHTML =document.getElementById("container").innerHTML+ html;
            }
            reader.readAsDataURL(file);
        }
    }


    allcolor=['#00ff00','#8cbe06','#fffc00','#ffba00','#ff6000','#ff0000']
    $(function(){
        var imgM = imgManger;
        //imgM.init()

        //图片检测
        $('#btn-pass').click(function(){
            if(image_load_type==0)
                image_det_from_url();
            else
                image_det_from_pic();
        });
        //本地图片检测
        function image_det_from_pic()
        {
            console.log("图片检测");
            if (alllocalimg.length==0){
                alert('请至少包含一个图片！');
                return false;
            }
            NProgress.start();  //进度条启动

            console.log('图片个数'+alllocalimg.length);
            for(let i=0;i<alllocalimg.length;i++)
            {
                send_pic(i);   //从鉴别第一张开始
                // send_pic(0);   //从鉴别第一张开始
            }

        }
        //单次发送一张图片
        function send_pic(iii) {
            local_img=alllocalimg[iii];
            console.log(local_img);

            var models = [];
            $("[name = models]:checkbox").each(function () {
                if ($(this).is(":checked")) {
                    models.push($(this).attr("value"));
                }
            });
            console.log(models);

            // var formdata=new FormData();
            // formdata.append('image_id',local_img['image_id']);
            // let image_id=local_img['image_id'];
            // formdata.append('image_data',local_img['image_data']);
            //
            // formdata.append('models',models);


            var formdata={};
            formdata['image_id']=local_img['image_id'];
            let image_id=local_img['image_id'];
            formdata['image_data']=local_img['image_data'];

            // formdata['models']=JSON.stringify(models);
            formdata['models']=models;
            console.log(formdata);



            $.ajax({
                type: "POST",     //post方式
                url: backend_server,   //请求网址
                data: JSON.stringify(formdata),  //数据内容
                dataType: 'json',
                crossDomain: true,
                cache:false,
                // processData:true,   //关闭序列化
                contentType:'application/json',
                success: function(back){
                    // console.log(JSON.stringify(back));
                    if(back['status']==0)    //每张图片的处理状态值
                    {
                        result = back['result'];  //当前图片的处理结果。
                        console.log(JSON.stringify(back));
                        div_dom=$("div[dataid='"+image_id+"']");
                        img_dom=div_dom.children('img')[0];
                        img_dom.setAttribute('src','data:.*;base64,'+result[image_id]);
                        div_dom.children('p').html('检测成功')

                    }else {
                        div_dom=$("div[dataid='"+image_id+"']");
                        div_dom.children('p').html('检测失败')
                    }

                },
                complete: function(){
                    NProgress.done();  // 设置滚动条完成
                }
            });
        }

    });
</script>
</body>
</html>
